<template>
  <div>

  <div class="mod-detail">
<!-- 头部 -->
    <div class="div-center">
      <div class="hander-s">
      <div class="in-t">
      <div class="in-ts"></div>
      <div class="zhengshuxiangqing">批量识别录入</div>
      </div>
      <div class="anniu">
        <div class="anniu-img">
          <i class="el-icon-warning-outline anniu-image"></i>
        </div>
      <div class="anniu-a">请点击【确认录入】按钮上传已识别证书</div>
      </div>
    </div>
    </div>

<!-- 内容 tabs -->
<div class="div-tabs">

<div class="title-text">

<div class="text-l"><span style="color:#6E92E9;">{{successAmount}}</span>   条识别成功</div>
<div class="text-c"><span style="color:#E96E6E;">{{errorAmount}}</span>   条识别失败</div>
<div class="text-r"><span style="color:#6E92E9;">{{existAmount}}</span>   条已存在</div>

</div>

 <div>
   <el-tabs class="tabs-s" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="识别录入列表" name="first">
      <el-table
      :data="dataSuccess"
      class="table-lod"
      ref="table"
      :header-cell-style="{background:'#F5F7FA'}"
      :max-height="tableHeight"
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
      label="序列"
      type="index"
      width="50">
    </el-table-column>
        <el-table-column
        prop="certificateType"
        min-width="80"
        align="center"
        sortable='custom'
        label="录入类型">
        <template slot-scope="scope">
          <span v-if="scope.row.certificateType === 1">
            <el-tooltip placement="top">在职员工</el-tooltip>
            在职员工
          </span>
          <span v-else-if="scope.row.certificateType === 2">
            <el-tooltip placement="top">挂靠</el-tooltip>
            挂靠
          </span>
          <span v-else>
            <el-tooltip placement="top">非在职员工</el-tooltip>
            非在职员工
          </span>
        </template>
      </el-table-column>
        <el-table-column
        prop="deptName"
        min-width="80"
        align="center"
        sortable='custom'
        label="保管部门">
      </el-table-column>
        <el-table-column
        prop="tackName"
        min-width="80"
        align="center"
        sortable='custom'
        label="保管人">
      </el-table-column>
      <el-table-column
        prop="name"
        min-width="80"
        align="center"
        sortable='custom'
        label="持证人姓名">
      </el-table-column>
      <el-table-column
        prop="idCard"
        sortable='custom'
        align="center"
        min-width="110"
        label="身份证号">
      </el-table-column>
      <el-table-column
        prop="certificateNo"
        sortable='custom'
        min-width="120"
        align="center"
        label="证书编号">
      </el-table-column>
      <el-table-column
        prop="releaseTime"
        min-width="170"
        sortable='custom'
        align="center"
        label="发证日期">
      </el-table-column>
      <el-table-column
        prop="validityEndTime"
        align="center"
        min-width="170"
        sortable='custom'
        label="到期日期"
        >
      </el-table-column>
      <el-table-column
        align="center"
        min-width="180"
        sortable='custom'
        label="操作"
        >
        <template slot-scope="scope">
        <el-button @click="handleClickYl(scope.row)" type="text" style="#6E92E9" size="mini">预览图片</el-button>
        <span style="color:#E8E8E8;">|</span>
        <el-button @click="handleClickVt(scope.row)" type="text" style="#6E92E9" size="mini">信息补全</el-button>
        <span style="color:#E8E8E8;">|</span>
        <el-button @click="handleClickDelete(scope.row)" type="text" style="#E96E6E" size="mini">删除</el-button>
      </template>
      </el-table-column>

    </el-table>

    </el-tab-pane>

    <el-tab-pane label="识别失败" name="second">

      <el-table
      :data="errorList"
      class="table-lod"
      ref="table"
      :header-cell-style="{background:'#F5F7FA'}"
      :max-height="tableHeight"
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
      type="index"
      width="50">
    </el-table-column>
      <el-table-column
        prop="fileName"
        min-width="70"
        sortable='custom'
        align="center"
        label="图片名称">
      </el-table-column>
      <el-table-column
        prop="cause"
        min-width="70"
        sortable='custom'
        align="center"
        label="失败原因">
      </el-table-column>
      <el-table-column
        align="center"
        min-width="170"
        sortable='custom'
        label="操作"
        >
        <template slot-scope="scope">
        <el-button @click="handleClickYlD(scope.row)" type="text" style="#6E92E9" size="mini">预览图片</el-button>
      </template>
      </el-table-column>
    </el-table>

    </el-tab-pane>
  </el-tabs>

<!-- 底部 -->
 <div class="bottom-iu">

<div class="shibie">已识别 <span style="color:#6E92E9;">{{dataSuccess.length}}</span> 条，   录入前请确认数据是否有误</div>

<div class="button-eeee">
 <el-button type="primary" @click="buttonClick()" icon="el-icon-upload2">确认录入</el-button>
</div>

 </div>

 </div>
</div>
  </div>

<el-dialog
  title="信息补全"
  :visible.sync="centerDialogVisible"
  width="80%"
  >
 <el-form :model="dataForm" ref="formlist" :rules="dataRule" label-width="150px">
              <el-row>
              <el-col :span="12">
                  <el-form-item label="证书录入类型" prop="certificateType">
                    <el-select v-model="dataForm.certificateType" @change="changeCertificateType" style="width:100%">
                      <el-option
                        v-for="item in certificateTypes"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        >
                      </el-option>
                    </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="10">
                  <el-form-item label="保管人" prop="keepUserId">
                    <el-tree-select
                      style="width:50%"
                      :data="treeData"
                      v-model="dataForm.keepDeptId"
                      node-key="id"
                      placeholder="请选择保管人部门"
                      :clearable="true"
                      @change="keepDeptChange"
                      ref="casc"
                    />
                    <el-select v-model="dataForm.keepUserId" @change="employeesChange" filterable placeholder="请选择保管人" style="width:40%">
                      <el-option
                        v-for="item in employees"
                        :key="item.id"
                        :clearable="true"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
              </el-col>
          </el-row>
                    <el-row>
              <el-col v-if="dataForm.certificateType == 1" :span="10" key="name1">
                <el-form-item label="持证人姓名" prop="id">
                  <el-select v-model="dataForm.id" filterable @change="changeName" placeholder="请选择持证人姓名" style="width:100%">
                      <el-option
                        v-for="item in dataEdit"
                        :key="item.value"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col v-if="dataForm.certificateType == 1" :span="2">
                <el-button class="col-buttons" @click="addOrUpdateHandleB()" type="primary" icon="el-icon-plus"> 新增</el-button>
              </el-col>
              <el-col v-if="dataForm.certificateType == 2 || dataForm.certificateType == 3" :span="12" key="name2">
                <el-form-item label="持证人姓名" prop="name">
                  <el-input v-model="dataForm.name" placeholder="请填写持证人姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col v-if="dataForm.certificateType == 1" :span="12" key="id1">
                <el-form-item label="身份证号">
                  <el-input :readonly="this.readonly" v-model="dataForm.idCard" placeholder="请填写身份证号"></el-input>
                </el-form-item>
              </el-col>
              <el-col v-if="dataForm.certificateType == 2 || dataForm.certificateType == 3" :span="12" key="id2">
                <el-form-item label="身份证号" prop="idCard">
                  <el-input  v-model="dataForm.idCard" placeholder="请填写身份证号"></el-input>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                <el-form-item label="证书类型" prop="idType">
                  <el-select v-model="dataForm.pIdType" filterable placeholder="请选择证书类型" style="width:50%" @change="jobChange">
                      <el-option
                        v-for="item in jobs"
                        :key="item.id"
                        :label="item.name"
                        :value="item.code">
                      </el-option>
                  </el-select>
                  <el-select v-model="dataForm.idType" filterable placeholder="请选择证书类别" style="width:49%" @change="confChange">
                    <el-option
                      v-for="item in confInfos"
                      :key="item.id"
                      :label="item.name"
                      :value="item.value">
                    </el-option>
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="证书专业" prop="profession">
                  <el-select v-model="dataForm.profession" filterable placeholder="请选择证书专业" style="width:100%">
                      <el-option
                        v-for="item in professions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
          </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="发证日期">
                  <el-date-picker type="date" v-model="dataForm.releaseTime" placeholder="选择发证日期" :picker-options="pickerOptionsBeginValidityEndTime" style="width:100%"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="证书到期日期">
                  <el-date-picker type="date" v-if="!checked" v-model="dataForm.validityEndTime" format="yyyy-MM-dd" placeholder="选择证书到期日期" style="width:78%" @blur="blurValidityEndTime" :picker-options="pickerOptionsValidityEndTime"></el-date-picker>
                  <el-checkbox style="width:20%; height:100%;" v-model="checked" label="长期有效" border size="medium"></el-checkbox>
                </el-form-item>
              </el-col>
          </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="证书编号" prop="certificateNo">
                  <el-input v-model="dataForm.certificateNo" placeholder="请填写证书编号"></el-input>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="clickPrimaryButton()">确 定</el-button>
  </span>
</el-dialog>

        <div @click="closeViewer">
          <el-image-viewer
          v-if="showViewer"
          :on-close="closeViewer"
          :url-list="[ylUrl]"/>
        </div>

        <div @click="closeViewerA">
          <el-image-viewer
          v-if="showViewerA"
          :on-close="closeViewerA"
          :url-list="[ylUrlA]"
        />
        </div>

<add-or-update :manualupdate="manualupdate" v-if="addOrUpdateVisible" ref="addOrUpdate"></add-or-update>
  </div>

</template>

<script>
  import Vue from "vue"
  import ElTreeSelect from "@/components/treeSelect/index.vue"
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  import AddOrUpdate from "@/views/modules/company/em/employee-add-or-update.vue"

const chinaIdentityValid = (rule, value, callback) => {
    if (!value) {
      return callback()
    }
    let city = {
      11: '北京',
      12: '天津',
      13: '河北',
      14: '山西',
      15: '内蒙古',
      21: '辽宁',
      22: '吉林',
      23: '黑龙江 ',
      31: '上海',
      32: '江苏',
      33: '浙江',
      34: '安徽',
      35: '福建',
      36: '江西',
      37: '山东',
      41: '河南',
      42: '湖北 ',
      43: '湖南',
      44: '广东',
      45: '广西',
      46: '海南',
      50: '重庆',
      51: '四川',
      52: '贵州',
      53: '云南',
      54: '西藏 ',
      61: '陕西',
      62: '甘肃',
      63: '青海',
      64: '宁夏',
      65: '新疆',
      71: '台湾',
      81: '香港',
      82: '澳门',
      91: '国外'
    }
    if (!value || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(value)) {
      callback(new Error('身份证号格式错误'))
    } else if (!city[value.substr(0, 2)]) {
      callback(new Error('身份证号格式错误'))
    } else {
      // 18位身份证需要验证最后一位校验位
      if (value.length === 18) {
        const code = value.split('')
        // ∑(ai×Wi)(mod 11)
        // 加权因子
        const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
        // 校验位
        const parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
        let sum = 0
        let ai = 0
        let wi = 0
        for (let i = 0; i < 17; i++) {
          ai = code[i]
          wi = factor[i]
          sum += ai * wi
        }
        if (parity[sum % 11].toString() !== code[17]) {
          callback(new Error('输入的身份证号有误'))
        }
      }
    }
    callback()
  }
  export default {
    name:'ManualAdd',
    data () {
    return {
      activeName:'first',
      tableHeight:0,
      dataListLoading: false,
      showViewer:false,
      showViewerA:false,
      centerDialogVisible:false,
      addOrUpdateVisible: false,
      readonly:false,
      checked: false,
      dataSuccess:[],
      errorList:[],
      dataListe:[],
      treeData: [],
      employees: [],
      confInfos:[],
      dataEdit:[],
      professions:[],
      jobs:[],
      ylUrl:'',
      ylUrlA:'',
      // 成功
      successAmount:'',
      // 失败
      errorAmount:'',
      // 已存在
      existAmount:'',
      dataForm:{
        certificateType:'',
        keepDeptId:'',
        keepUserId:'',
        id:'',
        name:'',
        idCard:'',
        pIdType:'',
        idType:'',
        profession:'',
        releaseTime:'',
        validityEndTime:'',
        certificateNo:'',
        listId:''
      },
      pickerOptionsBeginValidityEndTime:{},
      pickerOptionsValidityEndTime: {
           disabledDate: (time) => {
              return time.getTime() < this.dataForm.releaseTime
            }
        },
      dataRule: {
          certificateType: [
            { required: true, message: '请选择证书录入类型', trigger: 'blur' }
          ],
          id: [
            { required: true, message: '请填写持证人姓名,可新增为公司员工', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请填写持证人姓名', trigger: 'blur' }
          ],
          idType: [
            { required: true, message: '请选择证书类型', trigger: 'blur' }
          ],
          certificateNo: [
            { required: true, message: '请填写证书编号', trigger: 'blur' }
          ],
          idCard:
           [
             { required: true, message: '请填写身份证号', trigger: 'blur'  },
             { validator: chinaIdentityValid,trigger: 'blur'}
           ],
          releaseTime: [
            { required: true, message: '请选择发证日期', trigger: 'blur' }
          ],
          validityEndTime: [
            { required: true, message: '请选择证书到期日期', trigger: 'blur' }
          ],
          keepDeptId: [
            { required: true, message: '请选择保管单位', trigger: 'blur' }
          ],
          keepUserId: [
            { required: true, message: '请选择保管人', trigger: 'blur' }
          ],
          profession: [
            { required: true, message: '请选择证书专业', trigger: 'blur' }
          ]
        },
        certificateTypes:[{
          value: 1,
          label: '在职员工'
        }, {
          value: 2,
          label: '挂靠'
        }, {
          value: 3,
          label: '非在职员工'
        }
        ],
    }
    },
    props:{
      dataArrList:{
        type: Object
      },
      pink:{
        type: Object
      },
      arrList:{
        type:Object
      }
    },
    components: {
      ElTreeSelect,ElImageViewer,AddOrUpdate
    },
    watch:{
    },
    computed: {
      myHeader(){
        return {
          "token":Vue.cookie.get('token')
        }
      },
    },
    mounted(){
     this.adjustTableHeight()
     this.dataEvent()
    },
    created(){
      this.dataEvent()
      this.initOrgTree()
      this.keepDeptChange()
      this.initJobs()
    },
    methods: {

      dataEvent(){

      this.dataSuccess = this.dataArrList.successList
      this.errorList = this.dataArrList.errorList
      this.successAmount = this.dataArrList.successAmount
      this.existAmount = this.dataArrList.existAmount
      this.errorAmount = this.dataArrList.errorAmount

      this.dataSuccess.forEach( i=> {
      i.certificateType = this.arrList.certificateType
      i.keepDeptId = this.arrList.keepDeptId
      i.keepUserId = this.arrList.keepUserId
      i.deptName = this.pink.deptName
      i.tackName = this.pink.name
      i.certiPic = i.fileName
      i.constractPic = i.fileUrl
      })

      },
      addOrUpdateHandleB (id) {
        this.manualupdate = 2,
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      blurValidityEndTime(){
        if(this.dataForm.validityEndTime !== ''){
        this.pickerOptionsBeginValidityEndTime = {
           disabledDate: (time) => {
              return time.getTime() > this.dataForm.validityEndTime
            }
      }
        }else{
          this.pickerOptionsBeginValidityEndTime = {}
        }
      },
      adjustTableHeight(){
      this.$nextTick(() => {
            this.tableHeight = window.innerHeight;
            //后面的50：根据需求空出的高度，自行调整
        })
      },
      buttonClick(){

      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(`/certificate/certificateInfo/save/batch`),
              method: 'post',
              data:this.dataSuccess
      }).then(({data}) => {

              if (data && data.code === 0) {
                this.$message({
                  message: '添加成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                  this.dataListLoading = false
                  this.$emit('clickMe');
                  }
                })
              } else {
                this.$message.error(data.msg)
                this.dataListLoading = false
              }
            })

      },
      clickViewer(){
      console.log(111);
      },
      clickPrimaryButton(){
        // if(this.dataForm.)

        this.$refs['formlist'].validate((valid) => {
          if (valid) {
        this.dataSuccess.forEach(i =>{
        if(i.listId == this.dataForm.listId){
          i = this.dataForm
        }
        this.centerDialogVisible = false
      })
          }
      });


      },
      closeViewer(){
        this.showViewer = false
      },
      closeViewerA(){
        this.showViewerA = false
      },
      // 预览图片
      handleClickYl(row){
      this.ylUrl = row.fileUrl
      if(this.ylUrl !==''){
       this.showViewer = true
      }
      },
      handleClickYlD(row){
      this.ylUrlA = row.fileUrl
      if(this.ylUrlA !==''){
       this.showViewerA = true
      }
      },
      //  信息补全
      handleClickVt(row){
      this.dataForm = row
      if(this.dataForm.pIdType !==''){
      this.jobChange()
      }
      if(this.dataForm.idType !==''){
      this.confChange()
      }
      // if()
      this.employeesChange()
      this.keepDeptDataEdit()
      this.centerDialogVisible = true

      },
      // 删除
      handleClickDelete(row){
      this.dataSuccess = this.dataSuccess.filter(val => val.listId != row.listId)
      console.log(this.dataSuccess);
      },
      changeCertificateType(value){
      // console.log(123);
      // console.log(value);
      if(value == 3 || 2){
      this.readonly = false
      }
      if(this.dataForm.certificateType ==3){
      this.readonlyEdit = true
      }
      },
      keepDeptDataEdit(){
      this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/getEmployeeInfos'),
          // url: this.$http.adornUrl('/certificate/employeeInfo/holders'),
          method: 'get',
          params: this.$http.adornParams({
                  'deptId': 0
                })
        }).then(({data}) => {
          if (data.length > 0) {
          this.dataEdit = data
          if(this.dataForm.idCard !==''){

          this.dataEdit.forEach( i=> {
          if(i.idCard == this.dataForm.idCard){
            this.dataForm.id = i.id
          }
          })

          }
          // console.log(data);
          }
        })
      },
      initOrgTree() {
        this.$http({
          url: this.$http.adornUrl('/tenant/tenantDeptInfo/tree'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.treeData = [data.deptInfo]
            // 默认保管人
            this.dataForm.keepDeptId = this.treeData[0].children[0].id
          } else {
            this.treeData = []
          }
        })
      },
        keepDeptChange(id, item){
        // console.log(2);
        // this.employees = []
        // this.dataForm.keepUserId = ''
        this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/list'),
          method: 'get',
          params: this.$http.adornParams({
                  'filterFlag': 0,
                  'deptId': id,
                  'page': 1,
                  'limit': 1000,
                  'status': 1,
                })
        }).then(({data}) => {
          if (data.code == 0) {
            this.employees = data.page.list
            // 默认保管部门
            if(!this.dataListForm){
            // this.dataForm.keepUserId = data.page.list[0].id
            }else{
              // this.dataForm.keepUserId = this.dataListForm.keepUserId
            }
          }
        })
      },
        employeesChange(item){
          this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/info/'+ item),
          method: 'get',
        }).then(({data}) => {
          if (data.code == 0) {
          this.dataForm.keepDeptId = data.e.deptId
          this.dataForm.deptName = data.e.deptName
          this.dataForm.tackName = data.e.name
          }
        })
      // this.dataForm.keepDeptId = item.deptId
      },
      jobChange(value){
      this.confInfos = []
      this.professions = []
      // this.dataForm.idType = ''
      // this.dataForm.profession = ''
      this.$http({
        url: this.$http.adornUrl('/certificate/certificateInfo/getJobsConf'),
        method: 'get',
        params: this.$http.adornParams({
                'type': this.dataForm.pIdType
              })
      }).then(({data}) => {
        if (data && data.length > 0) {
          this.confInfos = data
        }
      })
      },
      changeName(id){
      this.dataForm.employeeId = id
      this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/info/'+id),
          method: 'get',
        }).then(({data}) => {
        // this.dataListName = data.e
        // this.dataForm.name = data.e.name
        if(this.dataForm.certificateType == 1){
        this.dataForm.idCard = data.e.idCard
        this.dataForm.mobile = data.e.mobile
        this.dataForm.academic = data.e.academic
        this.readonly = true
        }
        })
      },
      initJobs() {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getJobs'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.jobs = data
          }
        })
      },
      confChange(value){
        this.professions = []
        // this.dataForm.profession = ''
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getJobsConf'),
          method: 'get',
          params: this.$http.adornParams({
                  'type': this.dataForm.idType
                })
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.professions = data
          }
        })
      },
        chinaIdentityValid: (rule, value, callback) => {
    if (!value) {
      return callback()
    }
    let city = {
      11: '北京',
      12: '天津',
      13: '河北',
      14: '山西',
      15: '内蒙古',
      21: '辽宁',
      22: '吉林',
      23: '黑龙江 ',
      31: '上海',
      32: '江苏',
      33: '浙江',
      34: '安徽',
      35: '福建',
      36: '江西',
      37: '山东',
      41: '河南',
      42: '湖北 ',
      43: '湖南',
      44: '广东',
      45: '广西',
      46: '海南',
      50: '重庆',
      51: '四川',
      52: '贵州',
      53: '云南',
      54: '西藏 ',
      61: '陕西',
      62: '甘肃',
      63: '青海',
      64: '宁夏',
      65: '新疆',
      71: '台湾',
      81: '香港',
      82: '澳门',
      91: '国外'
    }
    if (!value || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(value)) {
      callback(new Error('身份证号格式错误'))
    } else if (!city[value.substr(0, 2)]) {
      callback(new Error('身份证号格式错误'))
    } else {
      // 18位身份证需要验证最后一位校验位
      if (value.length === 18) {
        const code = value.split('')
        // ∑(ai×Wi)(mod 11)
        // 加权因子
        const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
        // 校验位
        const parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
        let sum = 0
        let ai = 0
        let wi = 0
        for (let i = 0; i < 17; i++) {
          ai = code[i]
          wi = factor[i]
          sum += ai * wi
        }
        if (parity[sum % 11].toString() !== code[17]) {
          callback(new Error('输入的身份证号有误'))
        }
      }
    }
    callback()
  },
    }
  }
</script>

<style lang="scss" scoped>

.title-text{
  height: 40px;
  line-height: 40px;
  position: absolute;
  top: 0px;
  right: 15px;
  z-index: 1000;
}
.text-l{
  float: left;
}
.text-c{
  float: left;
  margin-left: 18px;

}
.text-r{
  float: left;
  margin-left: 18px;
}
.mod-detail{
  padding: 15px !important;
  background-color: #F5F7FA;
}
.shibie{
  float: left;
}
.button-eeee{
  float: right;
  position: absolute;
  right: 10px;
}
/deep/.tabs-s .el-tabs__active-bar{
  height: 2px !important;
}
/deep/.tabs-s{
  .el-tabs__header{
    .el-tabs__nav-wrap{
     .el-tabs__nav-scroll{
      .el-tabs__nav{
        .el-tabs__item{
          border: none !important;
          background-color: #ffffff !important;
          // padding-left: 0px !important;
        }
      }
     }
    }
  }
}
/deep/
.el-dialog{
.el-dialog__header{
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
.el-dialog__title{
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 20px !important;
}
}
}
.bottom-iu{
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  position: relative;
}
.div-tabs{
  width: 100%;
  background-color: #ffffff;
  padding-left:15px;
  padding-bottom:15px;
  padding-right:15px;
  position: relative;
}
.div-center{
  background-color: #ffffff;
}
.anniu-img{
  width: 18px;
  height: 100%;
  // background-color: #6E92E9;
  display: flex;
  justify-content: center;
  align-items: center;
  .anniu-image{
    font-size: 18px;
    font-weight: 700;
    color: #000000;
  }
}
.mod-isisis{
  padding-right: 15px !important;
  padding-left: 15px !important;
  background-color: #ffffff;
}
.in-t{
  height: 56px;
  float: left;
  display: flex;
  align-items: center;
}
.in-ts{
  width: 5px;
  height: 18px;
  float: left;
  margin-right: 8px;
  background: #6E92E9;
}

  .hander-s{
    width: 100%;
    height: 56px;
    color: #303133;
    overflow: hidden;
    .zhengshuxiangqing{
      float: left;
      color: #000000;
      font-weight: bold;
      font-family: PingFang SC;
      font-size: 16px !important;
      margin: 0px !important;
      padding: 0px !important;
    }
    padding-left: 10px;
    font-size: 14px;
    font-weight: 400;
    i{
      color: #F2F6FC;
      margin-left: 5px;
      margin-right: 5px;
    }
    .anniu{
      height: 56px;
      float: right;
      display: flex;
      align-items: center;
      margin-right: 15px;
      font-size: 14px;
      color: #000000;
      font-weight: bold;
    }
    .anniu-a{
      font-size: 16px !important;
      font-family: PingFang SC;
      margin-left: 8px;
    }
  }
</style>

